<script setup>
import {ref} from "vue";
import {Iphone, OfficeBuilding, Tickets} from "@element-plus/icons-vue";
import useUserInfoStore from "@/sts/userinfo";
import {ElMessage} from "element-plus";
const userinfo=useUserInfoStore();

//用户数据
const user=ref({
  id:'',
  name:'',
  username:'',
  introduce:'',
  occupationId:'',
  jurisdiction:'',
  occName:''
})
//用户修改数据
const userchange=ref({
  id:'',
  name:'',
  introduce:'',
  occupationId:'',
  jurisdiction:'',
  occName:''
})

import {
  Location,
} from "@element-plus/icons-vue"
import {getusermassage,changeusermassage,getoccupation} from "@/api/article";


//获取用户信息
const usermassage=async ()=>{
  let result=await getusermassage(userinfo.info);
  user.value=result.data;
}
usermassage();

//弹窗开关
const dialogVisible=ref(false);

//清空弹窗中内容
const removedialog=()=>{
  userchange.value.name='';
  userchange.value.introduce='';
  userchange.value.occName='';
}

//用户修改的请求
const userChangeService=async ()=>{
  userchange.value.id=user.value.id;
  userchange.value.jurisdiction=user.value.jurisdiction;
  if(userchange.value.occName===''){
    userchange.value.occName=user.value.occName;
    userchange.value.occupationId=user.value.occupationId;
  }
  else{
    for (const tem of options.value) {
      if(userchange.value.occName===tem.occName)
        userchange.value.occupationId=tem.id;
    }
  }
  await changeusermassage(userchange.value);
  ElMessage.success("修改成功");
  await usermassage();
  dialogVisible.value=false;
  removedialog();
}
//打开弹窗时自动填写
const AUTOFILL=()=>{
  userchange.value.name=user.value.name;
  userchange.value.introduce=user.value.introduce;
  userchange.value.occName=user.value.occName;
}

//用户升级
const userupgradeService=async ()=>{
  user.value.jurisdiction++;
  await changeusermassage(user.value);
  ElMessage.success("升级成功");
}
//获取职业信息
const occupationname= async ()=>{
  let result=await getoccupation();
  options.value=result.data;
  console.log(options.value);
}
occupationname();
const options = ref([
  {
    occName:'',
    id:'',
  }
])
</script>

<template>
  <!--  展示界面-->
  <el-card class="box-card">
    <el-descriptions
        class="margin-top"
        title="个人信息"
        :column="3"
        :size="'large'"
        border
    >
      <template #extra>
        <el-button type="success" @click="userupgradeService">升级</el-button>
        <el-button type="primary" @click="dialogVisible=true;AUTOFILL();">编辑个人资料</el-button>
      </template>
      <el-descriptions-item>

        <template #label>
          <div class="cell-item" >
            名称
          </div>
        </template>
        <div>{{ user.name }}</div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon >
              <iphone />
            </el-icon>
            职业
          </div>
        </template>
        {{user.occName}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item" >
            <el-icon >
              <location />
            </el-icon>
            地址
          </div>
        </template>
        林科大
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon >
              <tickets />
            </el-icon>
            备注
          </div>
        </template>
        <el-tag size="small">School</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon >
              <office-building />
            </el-icon>
            个性签名
          </div>
        </template>
        {{user.introduce}}
      </el-descriptions-item>
    </el-descriptions>
    <!--弹窗-->
    <el-dialog
        v-model="dialogVisible"
        title="修改资料"
    >
      <el-form :model="userchange" label-width="150px" class="dialog">
        <el-form-item label="请输入姓名">
          <el-input v-model="userchange.name"></el-input>
        </el-form-item>
        <el-form-item label="请输入个性签名">
          <el-input v-model="userchange.introduce"></el-input>
        </el-form-item>
        <el-select v-model="userchange.occName"  placeholder="职业选择" size="large" class="flex-form">
          <el-option
              v-for="item in options"
              :key="item.occName"
              :label="item.occName"
              :value="item.occName"
          />
        </el-select>
      </el-form>
      <div >
        <el-button @click="dialogVisible=false;removedialog">取消</el-button>
        <el-button type="primary" @click="userChangeService">确认</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<style scoped>
.box-card {
  transform: translateY(60px);
  margin-right: 100px;
  width: 800px;
  height: 600px;
}
.cell-item {
  display: flex;
  align-items: center;
}
.margin-top {
  margin-top: 20px;
}
.flex-form {
  display: flex;
  flex-direction: column;
}
.dialog{
  height: 240px;
}
</style>